<template>
	<view>
		<scroll-view @scroll="scroll" class="scroll-view" scroll-y="true" refresher-enabled="true"
		  :refresher-triggered="triggered"  
			@refresherrefresh="pulldown" @scrolltolower="scrolltolower" >
			<view style="width: 690rpx;margin: 0 auto; margin-bottom: 60rpx;" v-for="(item,index) in pingjialist" :key="index">
				<view style="display: flex;align-items: center;justify-content: space-between;">
					<view style="display: flex;align-items: center;">
						<image style="width: 100rpx;height: 100rpx;border-radius: 100%;" :src="item.image?JSON.parse(item.image):'../../static/img/home/exp.jpg'  " mode="aspectFill"></image>
						<view style="height: 100rpx; display: flex;flex-direction:column;justify-content: space-around;margin-left: 20rpx;">
							<view style="display: flex;align-items: center;">
								<view style="font-size: 32rpx;font-weight: 600rpx;">{{item.serverName? item.serverName:'暂无'}}</view>
								<view v-if="item.commentUser.remark!=null" style="margin-left: 20rpx; background-color: red;border-radius: 10rpx;color: #fff; font-size: 22rpx;font-weight: bold;padding: 2rpx 12rpx;box-sizing: border-box;">{{item.commentUser.remark}}</view>
							</view>
							
							<view style="color: #ccc; font-size: 24rpx;font-weight: 500rpx;">{{item.userPhone?item.userPhone:'暂无'}}</view>
						</view>
					</view>
					<view style="font-size: 24rpx;color: #ccc;">{{item.createTime}}</view>
				</view>
				<view class="rate" style="display: flex;align-items: center;">
					<uni-rate style="font-size: 24rpx;" v-model="item.score"></uni-rate>
					<view style="font-size: 24rpx;color: #ccc;">已购买{{JSON.parse( item.itemAttrValueJson)}}</view>
				</view>
				<view style="color: #ccc; font-size: 28rpx;font-weight: 500rpx;margin-top: 20rpx;">{{item.comment}}</view>
			  <block v-if="item.image!=null">
				<view v-for="(item2,index2) in JSON.parse(item.image)" :key="index" >
					<image style="margin-top: 20rpx;margin-right: 20rpx; width: 120rpx;height: 120rpx;" :src="item2" mode="aspectFill"></image>
				</view>
				</block>
			</view>
			<view style="height:300rpx"></view>
		</scroll-view>
	</view>
</template>

<script>
	import {pingjiaapi} from '@/utils/API.js';
	export default {
		data() {
			return {
				id:'',
				pingjialist:[],
				pageNum:1,
				pageSize:10,
				isloading:false,
			  triggered:false,
				total:0
			};
		},
		onLoad(e) {
			this.id = e.id
			this.pinglunfun()
		},
		methods:{
			//商品评论
			async pinglunfun(){
				var data = {itemId: this.id,pageNum:1,pageSize:5}
				this.isloading = true
				const res = await pingjiaapi(data)
				if(res.code==200){
					console.log('Pingjia',res.rows);
					this.pingjialist = [...this.pingjialist,...res.rows]
					this.triggered = false
					this.isloading = false
					this.total = res.rows.length
				}
			
			},
			//上拉加载
		  scrolltolower:function(){
			  console.log('111111');
			  if (this.total < 10) {
				 uni.showToast({
				 	 title: '已经全部加载完成了~',
				 	 duration: 1000,
				 	 icon: 'none'
				 });
				 return
			 }
			 if (this.isloading) return;
			 this.pageNum++;
			 uni.showLoading({
				 title: '加载中'
			 });
			 // 执行的函数↓
			 this.pinglunfun()
			},
			//
			pulldown:function(){
				console.log('scroll-view下拉刷新控件被下拉');
				this.triggered=true
				this.pingjialist=[]
				this.pageNum=1
				this.total = 0
				this.pinglunfun()
			},
		}
	}
</script>

<style lang="less">
.scroll-view{
		height: 100vh;width: 750rpx;overflow: hidden;padding-top: 30rpx;
	}
</style>
